<template>
<div class="login_box">
  <div class="out_box">
      <form action="">
      <h2>用户登录</h2>
      <div class="box">
        <label for="username"><span class="iconfont" style="padding:0px 8px">&#xe600;</span>用户：</label>
        <input name="user" v-model="user">
      </div>
      <div class="box box2">
       <label for="psw"> <span class="iconfont password" style="padding:0px 8px">&#xe618;</span>密码：</label>
        <input :type="type" v-model="psw">
        <span class="iconfont psw_close" @click="pswClick()" v-if="showpsw">&#xe606;</span>
        <span class="iconfont psw_close" @click="pswClick()" v-else>&#xe679;</span>
      </div>
      <div class="box box3">
        <input class="button" @click="Login" value="登录" type="button">
      </div>
    </form>
  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      type:'password',
      showpsw:true,
      userSite: true,
      user: '', 
      psw: ''
    }
  },
  methods:{
    pswClick () {
      this.type == 'password' ?this.type='text' :this.type='password';
      this.showpsw=!this.showpsw;
    },
    Login () {
        this.$router.push('/site')
        // window.contact.Login(this.user,this.psw);
        // return false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login_box{
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    background-color: #2d3a4b;
  }
  .out_box{
    position:absolute;
    width: 100%;
    min-height: 400px;
    top: 50%;
    margin-top: -200px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .out_box>>>input:-internal-autofill-selected{
     background-color: #283443!important;
     background: #283443!important;
     z-index: 999;
  }
  .box{
    color: #ffffff;
    background-color: #283443;
    width: 90%;
    border-radius: 3px;
    height: 39px;
    line-height: 36px;
    margin: 0 auto;
    margin-bottom: 18px;
    border: 1px solid #3e4957;
    font-weight: 300;
  }
  .box input,.box button{
    color: #ffffff;
    background-color: #283443;
    width: 70%;
    border: none;
    height: 30px;
    line-height: 30px;
  }
  .box label{
    display: inline-block;
    text-align: right;
    font-size: 0.9rem;
  }
  .box:hover{
    border:none;
    box-shadow: 0px 0px 2px 1px #8cc3fa inset;
  }
  h2{
    text-align: center;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 400;
  }
  .box .button{
    width: 100%;
    font-size: 1rem;
    font-weight: 350;
    background-color: #409eff;
    cursor: pointer;
    text-align: center;
  }
  .box3{
    border: 1px solid #409eff;
    background-color: #409eff;
    margin-top: 24px;
  }
  .box2{
    position: relative;
  }
  .box2 .psw_close{
    display:inline-block;
    position: absolute;
    cursor: pointer;
    right: 10px;
    z-index: 9999;
  }
  @media (min-width: 768px) {
  .box{
    width: 40%;
  }
  .box input{
    width: 70%;
  }
  }
</style>
